<template>
    <div class="select_class">
            <header >
                <a @click="$api.goBack()" class="back"></a>
                <span>课程点名</span>
                <a class="add" @click="batch()" v-if="!batchState" >批量点名</a>
                <a class="add" @click="batch()" v-if="batchState">单个点名</a>
            </header>
            <div class="flex_wrap" style="justify-content: center;border:1px solid #f2f2f2;padding:0.4rem 0">
                <input class="date_pick" v-model="date" readonly  />
                <mt-button type="default" size="small" style="margin:0 0.3rem;">班级选择</mt-button>
                <mt-button type="default" size="small" >签到详情</mt-button>
            </div>
            <mt-index-list >
                <mt-index-section  v-for="(site,index) in siteData" :key="index" :class="{'section1':index==siteData.length-1&&!batchState,'section2':index==siteData.length-1&&batchState}" :index="site">
                    <div class="main" v-for="(item,index) in showData" v-if="item.sortName==site">
                        <div class="flex">
                            <div class="flex_column" v-if="batchState" >
                                <input type="checkbox" v-model="item.checked" value="item.studentId" />
                            </div>
                            <div class="head">
                                <img  :src="item.studentPhoto" />
                            </div>
                            <div class="classroom">
                                <div class="className">{{item.studentName}}</div>
                                <div class="teacher">{{item.className}}</div>
                            </div>
                        </div>                       
                        <div class="right" v-if="!batchState" >
                            <mt-button type="default" @click="qingjia(item.studentId)" size="small" style="margin:0 0.3rem;">请假</mt-button>
                            <mt-button type="primary" @click="qiandao(item.studentId)" size="small" >签到</mt-button>
                        </div>
                        <div @click="$api.tell(item.phone)" class="tell_phone"></div>
                    </div>
                </mt-index-section>
                <div class="footer" style="right:21px;">
                    <div class="num_wrap">
                        <div>总人数{{allNum}}人</div>
                        <div>已签到{{alreadNum}}人</div>
                        <div>已请假{{leaveNum}}人</div>
                        <div>未签到{{nonNum}}人</div>
                    </div>
                    <div class="buttons_wrap" v-if="batchState">
                            <mt-button type="default" size="small" @click="checkAll()" >全选</mt-button>
                            <mt-button type="default" size="small" @click="checkInverse()" >反选</mt-button>
                            <mt-button type="default" size="small" @click="qingjia()" >请假</mt-button>
                            <mt-button type="primary" size="small" @click="qiandao()" >签到</mt-button>
                    </div>
                </div>
            </mt-index-list>
            
            <mt-datetime-picker v-model='dateFromDate' ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
                date-format="{value} 日" @confirm="date=$api.formatDate(dateFromDate)" :endDate='new Date()'>
            </mt-datetime-picker>
    </div>
    
</template>

<script>
    export default {
        data() {
            return {
                date: '', //日期,
                dateFromDate: '', //过度用日期,无实际作用
                allNum: 50,
                alreadNum: 30,
                nonNum: 10,
                leaveNum: 10,
                batchState: false,
                showData: [{
                    "noonMarkId": null,
                    "studentId": 3,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 1,
                    "studentName": "安生",
                    "sortName": "A",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级1"
                }, {
                    "noonMarkId": null,
                    "studentId": 3,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 3,
                    "studentName": "安生",
                    "sortName": "A",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级3"
                }, {
                    "noonMarkId": null,
                    "studentId": 2,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 1,
                    "studentName": "安娜",
                    "sortName": "A",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级1"
                }, {
                    "noonMarkId": null,
                    "studentId": 2,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 2,
                    "studentName": "安娜",
                    "sortName": "A",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级2"
                }, {
                    "noonMarkId": null,
                    "studentId": 4,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 1,
                    "studentName": "毕小红",
                    "sortName": "B",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级1"
                }, {
                    "noonMarkId": null,
                    "studentId": 4,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 3,
                    "studentName": "毕小红",
                    "sortName": "B",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级3"
                }, {
                    "noonMarkId": null,
                    "studentId": 5,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 1,
                    "studentName": "曹三",
                    "sortName": "C",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级1"
                }, {
                    "noonMarkId": null,
                    "studentId": 5,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 3,
                    "studentName": "曹三",
                    "sortName": "C",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级3"
                }, {
                    "noonMarkId": null,
                    "studentId": 1,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 1,
                    "studentName": "张三",
                    "sortName": "Z",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级1"
                }, {
                    "noonMarkId": null,
                    "studentId": 1,
                    "attendanceId": null,
                    "markFlag": null,
                    "markType": null,
                    "markTime": null,
                    "attendanceNo": null,
                    "markUserId": null,
                    "schoolId": null,
                    "classId": 2,
                    "studentName": "张三",
                    "sortName": "Z",
                    "studentPhoto": require("../../static/images/other/girl.jpg"),
                    "className": "班级2"
                }],
            }
        },
        methods: {
            openFromPicker() { //打开时间选择器
                this.$refs.fromDatepicker.open();
            },
            getNowDate() { //获取当前时间
                this.date = this.$api.formatDate(new Date());
                this.dateFromDate = this.$api.formatDate(new Date());
            },
            getInfo() { //调用接口获取数据,用于刷新页面等操作
                this.$api.post(url, params, (data) => {
                    this.alreadNum = data.info.alreadNum,
                        this.leaveNum = data.info.leaveNum,
                        this.showData = data.info.page.list
                })
            },
            batch() { //进去或取消批量签到
                this.batchState = !this.batchState
            },
            checkAll() { //全选

                this.showData = this.showData.map(x => {
                    x.checked = true;
                    return x
                })
            },
            checkInverse() { //反选
                this.showData = this.showData.map(x => {
                    x.checked = !x.checked
                    return x
                })
            },
            qingjia(studentId) { //请假
                var array = [];
                if (studentId) { //单个请假
                    array.push(studentId);
                } else { //多个请假
                    array = this.getCheckStudentId();
                }
                console.log('studentArray1', array);
            },
            qiandao(studentId) { //签到
                var array = [];
                if (studentId) { //单个签到
                    array.push(studentId);
                } else { //多个签到
                    array = this.getCheckStudentId();
                }
                console.log('studentArray1', array);
            },
            getCheckStudentId() { //获取选中的学生id
                var array = []
                this.showData.forEach(element => {
                    if (element.checked) {
                        array.push(element.studentId);
                    }
                });
                return array;
            }
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            }
        },
        created() {
            this.getNowDate(); //获取当前时间
            this.showData.forEach(element => {
                element.checked = false;
            });
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>